<template>
  <div class="policy">
    <el-container style="margin: auto">
      <el-aside width="200px">
        <el-menu
          active-text-color="#fff"
          background-color="#fff"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#000000"
          @open="handleOpen"
          @close="handleClose"
        >
          <div style="text-align: center; padding: 20px 0">专题库</div>
          <el-menu-item index="1" @click="handleMenuItemClick">
            <span class="">跨境电商业务知识</span>
            <ArrowRightBold
              style="width: 1em; height: 1em; margin-right: 8px"
            />
          </el-menu-item>
          <el-menu-item index="2" @click="handleMenuItemClick">
            <span>国际贸易“单一窗口”知识</span>
            <ArrowRightBold
              style="width: 1em; height: 1em; margin-right: 8px"
            />
          </el-menu-item>
          <el-menu-item index="3">
            <span>国际贸易法律法规</span>
            <ArrowRightBold
              style="width: 1em; height: 1em; margin-right: 8px"
            />
          </el-menu-item>
          <el-menu-item index="4">
            <span>口岸业务知识及业务规范</span>
            <ArrowRightBold
              style="width: 1em; height: 1em; margin-right: 8px"
            />
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main style="padding-top: 0"><SubModule></SubModule></el-main>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ArrowRightBold } from '@element-plus/icons'
import SubModule from './submodule/submodule.vue'

export default defineComponent({
  components: { ArrowRightBold, SubModule },
  setup() {
    const handleMenuItemClick = () => {
      console.log(11)
    }
    return { handleMenuItemClick }
  },
})
</script>

<style lang="less" scoped>
.el-menu {
  border-right: none;
}
// .policy {
//   // margin: 0 250px;
// }
// 目录
.el-submenu {
  background-color: #74797e !important;
  // 二级菜单 ( 默认背景 )
  .el-menu-item {
    padding-left: 50px !important;
    background-color: #74797e !important;
  }
}

::v-deep .el-submenu__title {
  background-color: #545c64 !important;
}

// hover 高亮
.el-menu-item:hover {
  color: #fff !important; // 菜单
}

.el-menu-item.is-active {
  color: #fff !important;
  background-color: #0a60bd !important;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 100%;
  height: calc(100% - 48px);
}
</style>
